<template>
  <!-- 新增技巧弹框 -->
  <el-dialog
    @close="onCloses"
    :visible.sync="articleDialogVisible"
    width="55%"
    title="新增技巧"
  >
    <span>
      <el-form
        ref="addArticleForm"
        :model="addArticleForm"
        label-width="80px"
        :rules="addArticleFormRules"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="addArticleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor
            ref="myQuillEditor"
            v-model="addArticleForm.articleBody"
            :options="editorOption"
          >
          </quill-editor>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="addArticleForm.videoURL"></el-input>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="articleDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addArticle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { add as articleAdd } from '../../api/hmmm/articles'
export default {
  props: {
    addArticleForm: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {
    // 新增文章
    async addArticle () {
      try {
        await this.$refs.addArticleForm.validate()
        await articleAdd(this.addArticleForm)
        this.$message.success('操作成功')
        // this.articleDialogVisible = false
        this.onCloses()
        this.getArticleList()
        // this.$refs.addArticleForm.resetFields()
      } catch (err) {
        this.$message.error('操作失败')
      }
    },
    onCloses () {
      this.$emit('update:show-dialog', false)
      this.$refs.addArticleForm.resetFields()
    }
  }
}
</script>

<style scoped lang='less'></style>
